<oem-header id="header-nav" class="control-all-header-fixed {% if router == 'index/index' %}index_page{% endif %}" style="--nav-bg: {{data.nav_bg}};--menu-color: {{data.menu_color}};" logo="left">
  <div class="header_top">
    <div class="container_wrapper">
      <div class="content nav-container flex">

        <div class="mobile_menu_icon md:hidden flex md:flex-1 items-center">
          <span class="flex items-center cursor-pointer">
            {% include 'svg',svg: 'mobile_menu_icon' %}
          </span>
        </div>

        <!-- logo -->
        <div class="nav-logo flex py-4">
          {% include 'logo',settings: data,class: 'logo flex justify-center items-center' %}
        </div>

        <!-- inline navigation -->
        <div id="inline_nav_wrap" class="md:flex hidden items-center justify-center flex-1">
          <div class="h-full {% if data.nav_type == 'type2' %}ul_flex-wrap{% endif %}">
            {% include 'custom_nav_more_link', header_nav: header_nav, menu_color: data.menu_color, bg_color: data.nav_bg, height: '100%', class: 'custom_nav nav_type1' %}
          </div>
        </div>


        <!-- action menu -->
        <div class="action-icon flex md:gap-0 gap-4 justify-end items-center">
          {% if data.is_search %}
            <div class="search_box control-all-search flex ic cursor-pointer">
              {% include 'svg',svg: 'search_icon' %}
            </div>
          {% endif %}
          <div class="cart-box-wrap ic">
            <a class="cart-box flex items-center" {% if page_ca !="cart_list" %} id="cart_icon"{% endif %}
              href="javascript:void(0);">
              {% include 'svg',svg: 'cart_icon' %}
              <span id="cart_number" class="ml-2">0</span>
            </a>
          </div>
          {% if data.is_member %}
            <div class="user ic relative md:block hidden">
              <a href="/account/login" class="flex items-center">
                {% include 'svg',svg: 'user_icon' %}
              </a>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</oem-header>
<div class="header-nav-placeholder hidden"></div>

<script>
  $(function() {
    $('.header-nav-placeholder').height($('#header-nav').height())
    function setNav(elem) {
      let nav = $(elem);
      let navW = $('#header-nav .container_wrapper').width() - $('#header-nav .container_wrapper .nav-logo ').width() - $('#header-nav .container_wrapper .action-icon').width() - 60
      moi.setCustomNav(nav, navW, true, () => {});
    }
    {% if data.nav_type == 'type1' %}
      setNav('#inline_nav_wrap .custom_nav')
    {% endif %}

    let tabBarHeight = $('#top-bar .top-bar-top').length !== 0
      ? $('#top-bar .top-bar-top').height() + 30
      : 0;
    $(window).on('scroll', function() {
      setFixedNav()
    })

    setFixedNav()
    function setFixedNav() {
      let scroll = $(window).scrollTop()
      if (scroll > tabBarHeight) {
        $('#header-nav').addClass('isfixed')
        $('.header-nav-placeholder').removeClass('hidden')
      } else {
        $('#header-nav').removeClass('isfixed')
        $('.header-nav-placeholder').addClass('hidden')
      }
    }

  })
</script>


<script>
  (function() {
    $("#cart_icon").click(function() {
      window.oemsaasMiniCart();
    });

    $(".minicart .close_btn").click(function() {
      $(".minicart").removeClass("minicart_on");
    });
    $(".minicart").click(function() {
      $(".minicart").removeClass("minicart_on");
    });
    $(".minicart_wrapper").click(function(e) {
      e.stopPropagation();
    });
    addCartNum();
  })()
</script>


<script>
  (function() {
    $('.mobile_menu_icon span').on('click', function() {
      $('#mobile_nav').addClass('show')
      $('html').addClass('html_scroll_none')
    })
  })()
</script>